<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <input type="text" />
    <span></span>
    <!-- <span>弱</span>
  <span>中</span>
  <span>强</span> -->
    <script>
      /* 
      如果密码长度低于6位： 直接显示 密码长度低于6位
                如果密码  小写字母  大写字母  数字
    */
     let input=document.querySelector('input[type=text]')
     let span=document.querySelector('span')
     input.onkeyup=()=> {
         let val=input.value.trim()
         if(val.length<6) {
             span.innerText='密码长度低于6位'
            }else {
             let a=0
             if(/\d/.test(val)) {
                 a++
             }
             if(/[a-z]/.test(val)) {
                 a++
             }
             if(/[A-Z]/.test(val)) {
                 a++
             }
             if(a===1) {
                 span.innerHTML='弱'
                //  span.style.backgroundColor='yellow'
                }
                else if(a===2) {
                    span.innerHTML='中'
                    // span.style.backgroundColor='teal'
                }
                else if(a===3) {
                    span.innerHTML='强'
                    // span.style.backgroundColor='green'
                }
         }
     }
    </script>
  </body>
</html>
